<template>
	<view class="conference-management">
		<xbd-pages-content title="会议室预定">
			<template #content>
				<view class="content">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="80" err-show-type="toast">
						<view class="form_left">
							<uni-forms-item  label="会议室" name="title">
								<text>{{ info.name }}</text>
							</uni-forms-item>
							<uni-forms-item  label="容纳人数" name="num">
								<text>{{ info.capacity }}</text>
							</uni-forms-item>
						</view>
						
						
						<uni-forms-item required label="会议名称" name="conference_name">
							<uni-easyinput :clearable="false" type="text" maxlength="20" v-model="formData.conference_name"
								placeholder="请输入会议名称" />
						</uni-forms-item>
						<uni-forms-item required label="主持人" name="host">
							<uni-easyinput :clearable="false" type="text" maxlength="20" v-model="formData.host" placeholder="请输入主持人姓名" />
						</uni-forms-item>
						<uni-forms-item required label="会服选项" name="option">
							<radio-group @change="radioChange">
								<label class="label">
									<radio value="0" :checked="formData.option === '0'" style="margin-right: 20rpx;" />
									<text>是</text>
								</label>
								<label class="label" style="margin-left: 100rpx;">
									<radio value="1" :checked="formData.option === '1'" style="margin-right: 20rpx;" />
									<text>否</text>
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item required label="会议主题" name="conference_theme">
							<uni-easyinput :clearable="false" type="text" maxlength="20" v-model="formData.conference_theme"
								placeholder="请输入会议主题" />
						</uni-forms-item>
						<uni-forms-item required label="会议内容" name="conference_content">
							<uni-easyinput :clearable="false" type="textarea" maxlength="100" v-model="formData.conference_content"
								placeholder="请输入会议内容" />
						</uni-forms-item>
						<uni-forms-item required label="会议日期" name="conference_date">
							<xbd-date-pickers fields="day" :date="formData.conference_date" :visible.sync="visible"
								@setDate="setDate">
								<template>
									<view class="date" @click="visible = true">
										<image class="date-img" src="@/static/images/date2.svg" mode=""></image>
										<text>{{ formData.conference_date }}</text>
									</view>
								</template>
							</xbd-date-pickers>
						</uni-forms-item>
						<uni-forms-item required label="会议时间" name="conference_time">
							<view class="date" @click="conferenceTime">
								<image class="date-img" src="@/static/images/date3.svg" mode=""></image>
								<text>{{ formData.conference_time }}</text>
							</view>
						</uni-forms-item>
						<uni-forms-item required label="会议时长" name="conference_duration">
							<view style="display: flex; align-items: center; color: #999999;">
								<view class="duration" style="padding-left: 20rpx;">{{ formData.conference_duration }}
								</view><text>分钟</text>
							</view>
						</uni-forms-item>
						<view class="form_left">
							<uni-forms-item label="参会人员" name="conference_participants">
								<view style="display: flex; align-items: center; color: #999999;">
									<view class="duration participants" @click="addpeople">添加参会人员</view>
									<text>({{formData.conference_participants.length}})</text>
								</view>
							</uni-forms-item>
						</view>
						
					</uni-forms>
					<view class="box" v-if="formData.conference_participants.length">
						<view class="box-item" v-for="item in formData.conference_participants" :key="item.id">
							{{ item.name }}
						</view>
					</view>
					<view class="open" v-if = "info.show_meeting === 'on'">
						<view class="bottom">
							<view class="left">
								会议前15分钟自动开启空调
							</view>
							<view class="right">
								<switch :checked="formData.conditioner" disabled="false" color="#59B500" />
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								会议前15分钟自动关闭窗帘
							</view>
							<view class="right">
								<switch :checked="formData.curtain" disabled="false" color="#59B500" />
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								会议前15分钟自动开启灯光
							</view>
							<view class="right">
								<switch :checked="formData.light" disabled="false" color="#59B500" />
							</view>
						</view>
					</view>
					<xbd-button-group liftTitle="取消" rightTitle="提交审核" @clickLeft="clickLeft" @clickRight="clickRight">
					</xbd-button-group>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		Meeting
	} from '@/api/index.js';
	var dayjs = require('dayjs');
	const date = dayjs(new Date()).format('YYYY-MM-DD');
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				flag: true,//防抖
				info: {},
				visible: false,
				userId: [],
				selectTime: [],
				formData: {
					conference_name: '',
					host: '',
					option: '1',
					conference_theme: '',
					conference_content: '',
					conference_date: date,
					conference_time: '',
					conference_duration: '0',
					conference_participants: [],
					light: true, //灯
					curtain: true, // 窗帘
					conditioner: true, // 空调
				},
				rules: {
					conference_name: {
						rules: [{
							required: true,
							errorMessage: '请输入会议名称'
						}]
					},
					host: {
						rules: [{
							required: true,
							errorMessage: '请输入主持人姓名'
						}]
					},
					conference_theme: {
						rules: [{
							required: true,
							errorMessage: '请输入会议主题'
						}]
					},
					conference_content: {
						rules: [{
							required: true,
							errorMessage: '请输入会议内容'
						}]
					},
					conference_time: {
						rules: [{
							required: true,
							errorMessage: '请选择会议时间'
						}]
					},
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			radioChange(e) {
				this.formData.option = e.detail.value;
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			clickRight() {
				this.$refs.form.validate().then(async res => {
					if (this.formData.conference_date === date) {
						const obj = {
							status: this.info.status, // 状态
							meeting: this.info.name, // 会议室名称
							capacity: this.info.capacity, // 容纳人数
							name: this.formData.conference_name, // 会议名称
							service: this.formData.option === '0', // 是否需要服务
							title: this.formData.conference_theme, // 会议主题
							content: this.formData.conference_content, // 会议内容
							date: this.formData.conference_date, // 会议日期
							host: this.formData.host, // 主持人
							startTime: this.formData.conference_time.split(' -- ')[0].trim(), // 开始时间
							endTime: this.formData.conference_time.split(' -- ')[1].trim(), // 结束时间
							duration: this.formData.conference_duration, // 持续时长(分)
							attendees: this.formData.conference_participants, // 参会人员
							light: this.formData.light, // 灯光 
							curtain: this.formData.curtain, // 窗帘
							conditioner: this.formData.conditioner // 空调
						};
						if (this.flag) {
							
						try {
							this.flag = false
							this.$showLoading('加载中');
							const res = await Meeting.postMetting(obj);
							uni.hideLoading();
							const {
								success
							} = res;
							if (success) {
								// uni.hideLoading();
								uni.showToast({
									title: '您的申请提交成功！',
									icon: 'none',
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							}else{
								// uni.hideLoading();
								this.flag = true
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
						} catch (e) {
							this.flag = true
							uni.hideLoading();
						}
						}
						uni.$emit('appointTime', this.info.name, this.selectTime);
					} else {
						const obj = {
							status: this.info.status, // 状态
							meeting: this.info.name, // 会议室名称
							capacity: this.info.capacity, // 容纳人数
							name: this.formData.conference_name, // 会议名称
							service: this.formData.option === '0', // 是否需要服务
							title: this.formData.conference_theme, // 会议主题
							content: this.formData.conference_content, // 会议内容
							date: this.formData.conference_date, // 会议日期
							host: this.formData.host, // 主持人
							startTime: this.formData.conference_time.split(' -- ')[0].trim(), // 开始时间
							endTime: this.formData.conference_time.split(' -- ')[1].trim(), // 结束时间
							duration: this.formData.conference_duration, // 持续时长(分)
							attendees: this.formData.conference_participants, // 参会人员
							light: this.formData.light, // 灯光 
							curtain: this.formData.curtain, // 窗帘
							conditioner: this.formData.conditioner // 空调
						};
						if (this.flag) {
						try {
							this.$showLoading('加载中');
							this.flag = false
							const res = await Meeting.postMetting(obj);
							uni.hideLoading();
							const {
								success
							} = res;
							if (success) {
								uni.showToast({
									title: '您的申请提交成功！',
									icon: 'none',
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500)
							}else{
								this.flag = true
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
							
						} catch (e) {
							this.flag = true
							uni.hideLoading();
						}
						}
					}
					
				}).catch(e => console.log(e))
			},
			conferenceTime() {
				uni.navigateTo({
					url: `./meetingtime?info=${JSON.stringify(this.info)}&selectTime=${JSON.stringify(this.selectTime)}&date=${this.formData.conference_date}`
				});
			},
			setDate(date) {
				if (date !== this.formData.conference_date) {
					this.selectTime = [];
					// 发请求获取当天数据
					this.info.time = [];
					// 发请求获取当天数据
					this.formData.conference_duration = '';
					this.formData.conference_time = '';
					this.formData.conference_date = date;
				}
			},
			editTime(arr, len) {
				this.selectTime = arr;
				this.formData.conference_time = arr.join('  --  ');
				this.formData.conference_duration = len * 15;
			},
			participants(arr) {
				this.formData.conference_participants = arr;
			},
			addpeople() {
				uni.navigateTo({
					url: `./participants?checked=${JSON.stringify(this.formData.conference_participants)}`
				});
			}
		},
		onLoad(res) {
			
			this.info = JSON.parse(res.info);
			console.log(this.info,'info')
			this.userId = [{
				id: this.userInfo.user_id,
				name: this.userInfo.user_name
			}];
			this.formData.conference_participants = [...this.userId];
			uni.$on('editTime', this.editTime);
			uni.$on('participants', this.participants);
		},
		onUnload() {
			uni.$off('editTime', this.editTime);
			uni.$off('participants', this.participants);
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content,
	::v-deep .uni-forms-item__content,
	::v-deep .uni-forms-item__label {
		min-height: 32px;
		line-height: 32px;
	}
	::v-deep .uni-forms-item__content{
		padding-top: 6rpx;
	}
	::v-deep .is-required {
		margin-right: 6rpx;
	}

	::v-deep .xbd-button-group {
		margin-top: 40px;
		margin-bottom: 15px;
	}

	::v-deep .is-input-error-border {
		border-color: #c8c7cc !important;
	}

	.content {
		padding: 20px;

		background-color: #FFFFFF;

		.date {
			display: flex;
			align-items: center;
			height: 32px;

			font-size: 14px;
			width: 100%;
			border: 2rpx solid rgb(229, 229, 229);
			border-radius: 4px;

			color: rgb(51, 51, 51);

			box-sizing: border-box;

			.date-img {
				width: 32rpx;
				height: 32rpx;
				margin: 24rpx;
			}
		}

		.duration {
			display: inline-block;
			height: 32px;

			font-size: 14px;
			width: 220rpx;
			margin-right: 10rpx;

			border: 2rpx solid rgb(229, 229, 229);
			border-radius: 4px;

			box-sizing: border-box;
		}

		.participants {
			margin-left: -20rpx;
			border: none;
			text-align: center;

			background-color: #E8E8E8;
			color: $uni-color-primary;
		}

		.box {
			display: flex;
			flex-wrap: wrap;
			padding: 5px 20rpx 0;
			border-radius: 8rpx;
			border: 1px solid #EEEEEE;

			margin-bottom: 20px;

			&-item {
				display: inline-block;

				border-radius: 8rpx;
				padding: 2px 6rpx;
				margin-right: 16rpx;
				margin-bottom: 5px;

				font-size: 24rpx;

				color: #457aff;
				background-color: rgba(69, 122, 255, .2);
			}
		}

		.open {
			border-top: 1px dashed #E8E8E8;
			padding: 40rpx 0;
			box-sizing: border-box;

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 24rpx;

				color: $uni-text-color;

				.left {
					color: #59B500;
				}

				.right {
					transform: scale(0.5);
				}
			}
		}
		.form_left{
			margin-left: 20rpx;
		}
	}
</style>
